템플릿에 새로운 태그를 만들어 사용, 복잡한 코드를 알아보기 쉽게 하거나, 하나의 컴포넌트를 여러 곳에 만들어서 사용할 수 있음. 자식 컴포넌트의 selector를 부모 컴포넌트에 사용하면 됌.

  • child-component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
import { Component } from '@angular/core';

@Component({
    selector: 'child-component',
    template: '<h2 (click)="onClick()">자식 컴포넌트 {{ no }}</h2>',
})

export class ChildComponent {
    no: number = 0;
    onClick() {
        this.no++;
    }
}
  • app.module.ts
1
2
3
4
5
6
7
8
...
import { ChildComponent } from '../components/child-component';
...
@NgModule({
  declarations: [
	...
    ChildComponent
    ...

만들어준 컴포넌트를 declarations에 추가한다.

자식 컴포넌트는 entryComponent에 추가해줄 필요가 없다.

  • 페이지.ts
1
2
3
4
5
6
7
8
9
10
11
import { Component } from '@angular/core';
import { ChildComponent } from '../components/child-component';

@Component({
  template: `
	<h2>이곳은 부모</h2>
	<child-component></child-component>
	`
})
export class ParentComponent {
}

Reference

https://www.youtube.com/watch?v=mB5eYtFwJR4&index=25&list=PLAiXlfcSCXYTA8k8AQX0sdRtvpOGkY7yq